import React from 'react';

import {
  Button, DatePicker, Form, Input, Popover, Select,
} from 'antd';

const moment = require('moment');

class InnerSearchForm extends React.Component {
  onReset = () => {
    const { form, onSearch } = this.props;
    form.resetFields();
    onSearch();
  };

  render() {
    const {
      form, onSearch, map, removeAdvancedSearch, removeRangePicker,
    } = this.props;
    const { getFieldDecorator } = form;
    const content = map === undefined ? null : (
      <div>
        <p>省份</p>
        <Form.Item>
          {getFieldDecorator('province')(
            <Select style={{ width: 250 }} allowClear placeholder="省份">
              {Array.from(map.keys()).map((item) => (
                <Select.Option value={item} key={item}>
                  {map.get(item)}
                </Select.Option>
              ))}
            </Select>,
          )}
        </Form.Item>
        <p>集群</p>
        <Form.Item>
          {getFieldDecorator('cluster')(<Input placeholder="集群" style={{ width: 250 }} />)}
        </Form.Item>
      </div>
    );
    return (
      <Form layout="inline">
        <div style={{ marginBlock: 18, display: 'flex', justifyItems: 'center' }}>
          <Form.Item>
            {getFieldDecorator('username')(<Input placeholder="用户名" style={{ width: 250 }} />)}
          </Form.Item>

          <Form.Item>
            <Button type="primary" icon="search" onClick={onSearch}>
              查询
            </Button>
          </Form.Item>

          <Form.Item>
            <Button icon="rollback" onClick={this.onReset}>
              重置
            </Button>
          </Form.Item>

          {removeAdvancedSearch === undefined && (
            <Form.Item>
              <Popover content={content} title="高级检索" trigger="click">
                <Button type="primary" icon="funnel-plot">
                  高级检索
                </Button>
              </Popover>
            </Form.Item>
          )}

          {removeRangePicker === undefined && (
            <Form.Item>
              {getFieldDecorator('time', {
                initialValue: [
                  moment()
                    .subtract(7, 'days')
                    .startOf('day'),
                  moment().endOf('day'),
                ],
              })(<DatePicker.RangePicker showTime onOk={onSearch} />)}
            </Form.Item>
          )}
        </div>
      </Form>
    );
  }
}

const SearchFrom = Form.create()(InnerSearchForm);
export default SearchFrom;
